<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../vue.js"></script>
    <title>Document</title>
</head>
<body>
    <!-- 插值语法：
            1.插值语法是在模板中插入data中的数据，并且可能会对数据做一些计算，属性名不能使用插值语法。
            2.插值语法只能书写表达式，不能书写语句
            3.插值语法中，如果数据的值是null或者是undefined，则直接转为空串，其他类型的都是整体转为字符串（包括数组的中括号和对象的大括号）
            4.插值语法中的变量只能去vm中的data中找值，定义全局变量无效
    -->
    <div id="app">
        <h1>{{msg}}</h1>
        <h1>{{count}}</h1>
        <h1>{{count+1}}</h1>
        <h1>{{isHot?'热':"冷"}}</h1>
        <h1>{{msg3}}</h1>
        <h1>{{msg4}}</h1>
        <h1>{{arr}}</h1>
        <h1>{{obj}}</h1>
        <h1>{{sy}}</h1> 
        <h1>{{a}}</h1> 

        <!-- react的列表渲染在vue中不适用,Vue用v-for指令 -->
        <!-- <p>
            {{arr.map((item)=>{
                return(<span>{{item}}</span>)
            })}}
        
        </p> -->
         <!-- react的条件渲染(if)在vue中不适用,Vue用v-if或者v-show指令 -->
        <!-- <p>
            {if(isHot){
                return '热'
            }else{
                return '冷'
            }
        }
        </p> -->
    </div>
    <script>
        const a = 2 //4.插值语法中的变量只能去vm中的data中找值，定义全局变量无效
        const vm = new Vue({
            data:{
                msg:'高高',//高高
                count:1 ,//1
                isHot:true,//true
                msg3:undefined,//空
                msg4:null,//空
                arr:['ggg','yyy','lll'],//[ "ggg", "yyy", "lll" ]
                obj:{name:'ggg',sex:'female'},//{ "name": "ggg", "sex": "female" }
                sy:Symbol()//Symbol()
            },
            el:'#app'

        })
    </script>
</body>
</html> 